<template>
    <div class="noPayList-view">

      <modules-title titleName="待收费"></modules-title>

      <div class="content-view">

        <screen-view v-model="screenData" @get-data="screenClick"></screen-view>

        <div class="tabView">

          <el-table
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                        'text-align':'center'
                    }"
            :cell-style="{'text-align':'center'}"
            :data="tableData"
            border
            @sort-change="sortChange"
            style="width: 100%">
            <el-table-column
              prop="real_name"
              label="患者"
              width="150">
            </el-table-column>
            <el-table-column
              label="性别"
              width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.gender == '0'">男</span>
                <span v-else-if="scope.row.gender == 1">女</span>
              </template>
            </el-table-column>
            <el-table-column
              label="年龄"
              width="80">
              <template slot-scope="scope">
                <span>{{scope.row.age | dealAge}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="联系方式"
              width="100">
            </el-table-column>
            <el-table-column
              prop="id_card"
              label="身份证号"
              width="200">
            </el-table-column>
            <el-table-column
              prop="date"
              label="就诊日期"
              sortable="custom"
              width="150">
              <template slot-scope="scope">
                <span>{{scope.row.created_at}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="doctor_name"
              label="医生"
              width="120">
            </el-table-column>
            <el-table-column
              prop="amount"
              label="总金额"
              width="100">
              <template slot-scope="scope">
                <span>¥{{scope.row.amount.toFixed(2)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="payClick(scope.row.charge_id)">收费</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>

<!--        <el-pagination-->
<!--          layout="prev, pager, next"-->
<!--          :total="total"-->
<!--          @current-change="currentChange"-->
<!--          @prev-click="prevClick"-->
<!--          @next-click="nextClick"-->
<!--        >-->
<!--        </el-pagination>-->

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </div>

    </div>
</template>

<script>
  import screenView from "../modules/screenView";
  import {medicineList} from "../../../api/payOrDrug";

  export default {
      name: "index",
      components: {screenView},
      data:function () {
          return{
              tableData: [],

              total:0,
              loading:false,
              end:false,
              pageNum:1,
              pageSize:10,
              order_name:'',
              order_by:'',

              screenData:{
                  name:'',
                  doc:0,
                  startDate:'',
                  endDate:'',
              },

              isNewPay:false,
          }
      },
      watch: {
          isNewPay: {
              handler(newval, oldval) {
                  if (newval){
                      this.$store.dispatch("message/setIsNewPayting",false)
                      this.automaticallyRefresh();
                  }
              },
              immediate: true,
          },
      },
      mounted:function(){
          // this.startDate = new Date();
          // this.endDate = new Date();
          this.getData();
          this.isNewPay = this.$store.getters.isNewPay

      },
      methods:{
          automaticallyRefresh:function(){
              console.log("automaticallyRefresh")
              if (this.pageNum > 1 || this.screenData.name != "" || this.screenData.doc){
                  return;
              }
              let time = this.dealDate(new Date());
              if (this.screenData.startDate.indexOf(time) == -1  || this.screenData.endDate.indexOf(time) == -1){
                  return;
              }
              this.getData();
          },
          sortChange:function(column, prop, order){

              if (column.column.label == "就诊日期"){
                  this.order_name = "created_at"
              }
              if (column.order == "ascending"){
                  this.order_by = "asc"
              }else {
                  this.order_by = "desc"
              }
              this.getData();
          },
          screenClick:function(){
              this.pageNum = 1;
              this.getData();
          },
          //监听条数变化
          handleSizeChange(val) {
              this.pageSize = val;
              this.getData();
          },
          //监听页码变化
          handleCurrentChange(val) {
              console.log(`当前页: ${val}`);

              this.pageNum = val
              this.getData();
          },
          updateApi:function(){
              this.getData();
          },
          payClick:function (id) {
              this.$router.push({name:'noPayDetails',query:{id:id}})
          },
          getData:function () {
              let data = {
                  real_name:this.screenData.name,
                  doctor_id:this.screenData.doc,
                  start_time:this.screenData.startDate,
                  stop_time:this.screenData.endDate,
                  order_name:this.order_name,
                  status:1,
                  pager:{
                      number:this.pageNum,
                      size:this.pageSize,
                      order_by:this.order_by
                  }
              };
              medicineList(data).then((res)=>{
                  if (res.code == 200){
                      this.total = res.data.total;
                      this.tableData = res.data.data;
                      if (this.pageNum*this.pageSize >= this.total){
                          this.end = true;
                      }else {
                          this.end = false;
                      }
                  }else {
                      this.$message.error(res.msg);
                  }
              })
          },
          currentChange:function (val) {
              console.log(val)
              this.pageNum = val;
              this.getData();
          },
          dealDate:function (date) {
              let year = date.getFullYear();
              let month = date.getMonth() + 1;
              let day = date.getDate();
              if (month < 10){
                  month = "0" + month
              }
              if (day < 10){
                  day = "0" + day;
              }

              return year + ":" + month + ":" + day
          },
      },
  }
</script>

<style lang="scss">
  @import "@/assets/scss/payOrDrug/noPayList.scss";
</style>
